<%-- 
    Document   : event
    Created on : Apr 19, 2011, 2:55:43 PM
    Author     : DIT-0958372
--%>

<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="userInfo" class="Bean.Account.AccountSC" scope="session"/>
<%--<jsp:useBean id="eventBean" scope="session" class="Bean.Others.EventBean" />--%>

<%
            ArrayList eventHostList = (ArrayList) session.getAttribute("hostList");
            ArrayList eventParticipantsList = (ArrayList) session.getAttribute("participantsList");
%>

<html>
    <jsp:include page="profile_Head.jsp"/>
    <body>

        <div id="tabsForEvent">
            <ul>
                <li><a href="#tabs-eventHosted">Event Hosted</a></li>
                <li><a href="#tabs-eventParticipated">Event Joined</a></li>
                <li><a href="#tabs-createEvent">Create Event</a></li>
            </ul>
            <div id="tabs-eventHosted">
                <table border="1">
                    <thead>
                        <tr>
                            <th>Event Index</th>
                            <th>Event Name</th>
                            <th>No Of Participant</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                            <th>View Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--                                            Using for loop to display the data-->
                    <form action="ManageEvent.do" method="POST">
                        <c:forEach var="eventBeanItem" items="<%= eventHostList%>" varStatus="counter">
                            <tr>
                                <td><c:out value="${eventBeanItem.eventIndex}"/></td>
                                <td><c:out value="${eventBeanItem.eventName}"/></td>
                                <td><c:out value="${eventBeanItem.noOfParticipants}"/></td>
                                <td><c:out value="${eventBeanItem.startTime}"/></td>
                                <td><c:out value="${eventBeanItem.endTime}"/></td>

                                 <!--                               The current logon user must be the one of the creator in order to cancel the event -->
                                <td><a href="../ManageEvent.do?condition=ModifyEvent&eventIndex=${eventBeanItem.eventIndex}"><button>Modify</button></a></td>
                                <td><a href="../ManageEvent.do?condition=QuitEvent&eventIndex=${eventBeanItem.eventIndex}"><button>Quit Event</button></a></td>
                                <td><a href="../ManageEvent.do?condition=ContactOrganizers"><button>Contact Organizers</button></a></td>
                            </tr>

                        </c:forEach>
                    </form>
                    </tbody>
                </table>
            </div>
            <div id="tabs-eventParticipated">


                <table border="1">
                    <thead>
                        <tr>
                            <th>Event Index</th>
                            <th>Event Name</th>
                            <th>No Of Participant</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                            <th>View Details</th>
                        </tr>
                    </thead>
                    <tbody>s
<!--                    <form action="ManageEvent.do" method="POST">-->
                        <!--  Using for loop to display the data-->
                        <c:forEach var="eventBeanItem" items="<%= eventParticipantsList%>" varStatus="status" begin="1">
                            <tr>
                                <td><c:out value="${eventBeanItem.eventIndex}"/></td>
                                <td><c:out value="${eventBeanItem.eventName}"/></td>
                                <td><c:out value="${eventBeanItem.noOfParticipants}"/></td>
                                <td><c:out value="${eventBeanItem.startTime}"/></td>
                                <td><c:out value="${eventBeanItem.endTime}"/></td>
                                <!--                               The current logon user must be the one of the creator in order to cancel the event -->
                                <td><a href="../ManageEvent.do?condition=ModifyEvent&eventIndex=${eventBeanItem.eventIndex}"><button>Modify</button></a></td>
                                <td><a href="../ManageEvent.do?condition=QuitEvent&eventIndex=${eventBeanItem.eventIndex}"><button>Quit Event</button></a></td>
                                <td><a href="../ManageEvent.do?condition=ContactOrganizers"><button>Contact Organizers</button></a></td>
                            </tr>

                        </c:forEach>

<!--                    </form>-->
                    </tbody>
                </table>
            </div>

            <div id="tabs-createEvent">
                <form method="POST" action="../event.do">
                    <table>
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Fields</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr>
                                <td>Event Name:</td>
                                <td><input type="text" name="eventName" value="" size="20" /></td>
                            </tr>
                            <tr>
                                <td>Description:</td>
                                <td><input type="text" name="eventDescription" value="" size="20" /></td>
                            </tr>
                            <tr>
                                <!-- Should be an array here to show all the hosts, code with the backend logic                            -->

                                <td>Event Hosts:</td>
                                <td>
                                    <div id="TextBoxesGroupHost">
                                        <div id="HostTbDiv">
                                            <label>Host 1: </label><input type='textbox' name='tbHost1' >
                                        </div>
                                    </div>
                                    <input type='button' value='Add' id='addHost'>
                                    <input type='button' value='Remove' id='removeHost'>

                                </td>
                            </tr>
                            <tr>
                                <td>No Of Participants:</td>
                                <td><input type="text" name="noOfParticipants" value="" size="20" /></td>
                            </tr>
                            <tr>
                                <!-- array also                            -->
                                <td>Participants:</td>
                                <td>
                                    <div id="TextBoxesGroupParticipants">
                                        <div id="ParticipantsTbDiv">
                                            <label>Participant 1: </label><input type='textbox' name='tbParticipants1' >
                                        </div>
                                    </div>
                                    <input type='button' value='Add' id='addp'>
                                    <input type='button' value='Remove' id='removep'></td>
                            </tr>
                            <tr>
                                <td>Event Creator:</td>
                                <td><input type="text" name="creator" value="${userInfo.userName}" size="20" /></td>
                            </tr>
                            <tr>
                                <td>Start Time:</td>
                                <td><input id="datepicker4" type="text" name="startTime" value="" size="20" /></td>
                            </tr>
                            <tr>
                                <td>End Time:</td>
                                <td><input id="datepicker5" type="text" name="endTime" value="" size="20" /></td>
                            </tr>

                            <tr>
                                <td><input type="submit" value="Submit"></td>
                                <td><input value="Cancel" type="reset"></td>
                            </tr>
                        </tbody>
                    </table>
                </form>


            </div>

        </div>
    </body>
</html>
